<template>
    <div class="reset" v-if="allGoods">
        <van-tabs v-model="active" nav-left>
            <van-tab v-for="(item,index) in allGoods" :title="item.title" :key="index">
                <!-- {{ item.goods }} -->
            <div class="plank clearfix" v-for="(items,index) in item.goods" :key="index" @click="getDetails(items)">
                <div class="goods-avatar l">
                    <img v-lazy="items.good.avatar">
                </div>
                <div class="goods-info l">
                    <div class="clearfix" style="position:relative;height: 100%;">
                        <div class="l" style="height: 100%;width: 100%;">
                            <div style="font-size: 16px;height: 30%;">
                                <div style="max-height: 70%;text-overflow: ellipsis;overflow: hidden;">
                                    {{ items.good.title }}
                                </div>
                            </div>
                            <p style="font-size: 12px;color:#999;text-decoration: line-through;">¥ {{ items.good.original_price }}</p>
                            <p style="font-size: 16px;color:rgb(246, 146, 36);font-weight: 700;">¥ {{ items.good.price }} 元</p>
                            <p style="font-size: 16px;color:#e1251b;font-weight: 700;">秒抢卡: {{ items.coupon_num }} 张</p>
                        </div>
                       <div class="r">
                            <van-button color="#F93F24" style="position: absolute;bottom: 0;right: 0; background-color:#F93F24" round size="mini" type="warning"> &nbsp;&nbsp;  {{ items.status ='Apply' ? '去预约' :'马上抢' }}   <van-icon name="arrow" /> &nbsp; </van-button>
                        </div>
                    </div>
                </div>
                <div class="goods-info-time">
                    <span>{{ items | timesText }}</span>
                    <van-count-down  style="color: red" :time="items | times" />
                </div>
            </div>
            <template v-if="item.goods.length == 0">
                <p style="margin: 0;padding: 20px 5px;text-align:center;">暂无商品</p>
            </template>
            </van-tab>
        </van-tabs>
    </div>
</template>
<script>
import moment from 'moment'
export default {
    name:'resetVanTabs',
    props:{
        allGoods:Array
    },
    data(){
        return {
            active:new Date().getDay() -1,
        }
    },
    created(){
        // console.log(this.allGoods);
    },
    methods:{
        getDetails(items){
            this.$emit('getDetails',items)
        }
    },
    filters:{
        timesText(val){
            let newDate = moment().format('YYYY-MM-DD HH:mm:ss');
            let { apply_end_at,apply_start_at,start_at,end_at } = val;
            if(moment(newDate).isBefore(apply_start_at)){
                return '距活动预约开始剩余'
            }else if(moment(newDate).isBefore(apply_end_at)){
                return '距活动预约结束剩余'
            }else if(moment(newDate).isBefore(start_at)){
                return '距活动开始还剩余'
            }else if(moment(newDate).isBefore(end_at)){
                return '距活动结束还剩余'
            }else{
                return '活动已结束'
            }
        },
        times(val){
            let newDate = moment().format('YYYY-MM-DD HH:mm:ss');
            let { apply_end_at,apply_start_at,start_at,end_at } = val;
            if(moment(newDate).isBefore(apply_start_at)){
                return moment(apply_start_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
            }else if(moment(newDate).isBefore(apply_end_at)){
                return moment(apply_end_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
                // return '活动预约未开始'
            }else if(moment(newDate).isBefore(start_at)){
                return moment(start_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
            }else if(moment(newDate).isBefore(end_at)){
                return moment(end_at,'YYYY-MM-DD HH:mm:ss') - moment(newDate)
                // return '活动进行中'
            }else{
                return 0
                console.log('活动已结束')
                // return '活动已结束'
            }
        }
    }
}
</script>
<style lang="less">
.reset {
    .van-tabs {
        background-color: white;
        padding-top: 10px;
        .van-tab {
            flex-basis: 14.3%!important
        }
    }
    .plank {
        padding: 5px 5px;
        margin-bottom: 5px;
        max-height: 390px;
        
        .goods-avatar {
            height: 110px;
            width: 30%;
            img {
                height: 100%;
                width: 100%;
                border-radius: 4px;
            }
        }
        .goods-info {
            margin-left: 2px;
            padding: 2px 10px;
            height: 110px;
            width: 68%;
            
        }
        .goods-info-time {
            display: flex;
            flex-wrap: nowrap;
            justify-content: space-between;
            padding: 0.3846rem  1.3846rem 0.7692rem ;
        }
    }
    
}
</style>